<template>
  <div id="divId" :style="{height: '450px',width: tableWidth}">
    <el-form :inline="true">
      <el-form-item label="年份选择">
        <el-select v-model="value" placeholder="请选择年份" @change="selectTime">
          <el-option
            v-for="item in years"
            :key="item.value"
            :label="item.lable"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="备案状态选择" >
        <el-select v-model="value1" placeholder="请选择" @change="selectState">
          <el-option
            v-for="item in states"
            :key="item.value"
            :label="item.lable"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-button type="primary" v-on:click="applyDownload">数据导出</el-button>
    </el-form>

    <!-- 对应弹框TenderRecordActivityWindow -->
    <div>
      <el-dialog :visible.sync="windowVisible" append-to-body :close-on-click-modal="false">
        <TenderRecordActivityWindow
          v-if="windowVisible"
          ref="popWindow"
          v-on:closeWindow='closeWindow'
          v-on:updateWindow="updateWindow"></TenderRecordActivityWindow>
      </el-dialog>
    </div>

    <el-row>
      <el-col :span="24">
        <el-table
          :data="tableData.slice((pageNo-1)*page_size,pageNo*page_size)"
          size="mini"
          style="width: 100%"
          header-cell-class-name="table-header-gray"
          v-loading="isShowloading"
          max-height="450"
          border="1px solid gray">
          <el-table-column type="index" align="center" label="序号" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="recordNumber" align="center" label="备案编号" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="recordState" align="center" label="备案状态" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="projectId" align="center" label="项目编号" width="120" show-overflow-tooltip></el-table-column>
          <el-table-column prop="projectName" align="center" label="项目名称" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column prop="customName" align="center" label="业主名称" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column prop="ownerContact" align="center" label="业主联系人" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column prop="ownerPhone" align="center" label="业主联系电话" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column prop="contractAmount" align="center" label="合同金额（元）" width="120" show-overflow-tooltip ></el-table-column>
          <el-table-column prop="contractGetDate" align="center" label="合同签约日期"  width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="tenderType" align="center" label="招标类型" width="100" show-overflow-tooltip ></el-table-column>
          <el-table-column prop="projectManager" align="center" label="项目经理" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="projectArea" align="center" label="项目区域" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="tenderPrice" align="center" label="中标价（元）" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="fundSource" align="center" label="资金来源" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="startAndEndTime" align="center" label="招标文件发售起止时间" width="150" show-overflow-tooltip></el-table-column>
          <el-table-column prop="tenderTime" align="center" label="开标时间" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="tenderStartArea" align="center" label="开标地点" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="tenderWinner" align="center" label="中标人" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column prop="recordTime" align="center" label="备案时间" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="100">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit(scope.$index, scope.row)" icon="el-icon-edit" size="mini">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="end" style="margin-top: 10px">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-size="page_size"
            :page-sizes="[10, 20, 30]"
            layout="total, prev, pager, next, sizes"
            :total="total"></el-pagination>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TenderRecordActivityWindow from '@/components/views/TenderRecordActivityWindow';
import { InvitationStatisticsTable } from '@/api/bigdata.js';
import { baseUrl } from '../../core/config/development';
export default {
  components: {
    TenderRecordActivityWindow
  },
  data () {
    return {
      tableWidth: '',
      screenWidth: document.documentElement.clientWidth, // 屏幕宽度
      windowVisible: false,
      addOperate: undefined,
      tableData: [],
      years: [],
      states: [{
        value: '全部',
        lable: '全部'
      }, {
        value: '已备案',
        lable: '已备案'
      }, {
        value: '未备案',
        lable: '未备案'
      }],
      value: '',
      value1: '全部',
      total: 0,
      page_size: 10,
      pageNo: 1,
      isShowloading: false,
      year: '',
      state: '全部'
    };
  },
  watch: {
    'screenWidth': function (val) { // 监听屏幕宽度变化
      this.tableWidth = (Number(val) - 620) + 'px';
    }
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function (el) {
        el.focus();
      }
    }
  },
  mounted: function () {
    this.tableWidth = this.screenWidth - 620 + 'px'
    var _this = this;
    window.onresize = function () { // 定义窗口大小变更通知事件
      _this.screenWidth = document.documentElement.clientWidth; // 窗口宽度
    };
    this.loadYears();
    this.loadTableData();
  },
  methods: {
    applyDownload () {
      var year = this.year;
      var state = this.state;
      var url = baseUrl + 'apiExcel/getAdBidExcel?year=' + year + '&state=' + state;
      // var url ="http://"+document.location.host+'/api/excel'
      window.location.href = url;
    },
    loadYears () {
      let currentYear = new Date().getFullYear();
      this.value = currentYear;
      this.year = currentYear;
      this.years = [];
      this.years.push({value: '全部', lable: '全部'});
      for (let i = 0; i < 11; i++) {
        this.years.push({value: (currentYear - i), label: (currentYear - i) + '年'});
      }
    },
    // 年份选择
    selectTime (data) {
      this.year = data;
      this.loadTableData();
    },
    //  备案状态选择
    selectState (value) {
      this.state = value;
      this.loadTableData()
    },
    /**
     * 获取表格数据
     */
    loadTableData () {
      let params = {
        size: this.page_size,
        current: this.pageNo,
        year: this.year,
        state: this.state
      }
      return new Promise((resolve, reject) => {
        InvitationStatisticsTable.listTenderRecord(this, params).then(res => {
          this.tableData = res.data.records;
          this.total = res.data.total;
          this.editTimeType(this.total);
        }).catch(e => {
          reject(e);
        });
      });
    },
    editTimeType (val) {
      for (var i = 0; i < val; i++) {
        if (this.tableData[i].startAndEndTime === undefined || this.tableData[i].startAndEndTime.length <= 0) {
          console.info(this.tableData[i].startAndEndTime);
        } else {
          this.$set(this.tableData[i], 'startAndEndTime', this.tableData[i].startAndEndTime.join('至'));
        }
      }
    },
    // 分页导航
    handleCurrentChange (val) {
      this.pageNo = val
      this.loadTableData()
    },
    handleSizeChange (val) {
      this.page_size = val
      this.loadTableData()
    },
    currentChange (val) {
      this.pageNo = val
      this.loadTableData()
    },
    // 编辑
    handleEdit (index, row) {
      this.windowVisible = true;
      this.addOperate = false;
      this.$nextTick(() => {
        let copy = Object.assign({}, row);// row是所编辑本行内数据对象
        this.thisEditRow = copy;
        this.$refs.popWindow.dataInit(copy);
      });
    },
    closeWindow () {
      this.windowVisible = false;
    },
    updateWindow () {
      this.windowVisible = false;
      this.loadTableData()
    }
  }
};
</script>

<style scoped>
.el-form-item{
    margin-right: 20px;
}
</style>
